<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proxy 与 Reflect</title>
</head>
<body>
  <script>
   const user = {
     name: 'tom',
     age: 12
   }

   // 创建user对象的代理对象, 来监视/劫持/拦截对象数据的操作
   const userProxy = new Proxy(user, {
    get (target, prop) {
      console.log('拦截到读取属性', prop)
      // return target[prop]
      return Reflect.get(target, prop)
    },

    set (target, prop, value) {
      console.log('拦截到修改属性值或添加新属性', prop, value)

      return Reflect.set(target, prop, value)
    },

    deleteProperty (target, prop) {
      console.log('拦截到删除属性', prop)
      return Reflect.deleteProperty(target, prop)
    }
   })

   console.log(userProxy)

   // 读取属性
   console.log(userProxy.name, userProxy.age)
   // 更新属性值
   userProxy.name += '--'
   userProxy.age += 1

   // 添加新属性
   userProxy.sex = '男'
   console.log(userProxy.name, userProxy.age, userProxy.sex)

   // 删除属性
   delete userProxy.name
   console.log(userProxy.name)

  </script>
</body>
</html>